<template>
	<!-- 轮播子组件  -->
	<view class="swiper-view">
		<view class="swiper-top">
			<view>
				<swiper class="swiper" :autoplay='true' :circular="true" interval="2000" duration="1000" @change="swiperChange">
					<block v-for="(item,index) in banner" :key="index">
						<swiper-item class="swiper-item" @click="goDetail(item.goods_id,item.video_url)">
							<image :src="item.banner_cover" mode="aspectFill"></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<!-- 自定义的指示点（不要自带的圆圈小点） -->
			<view class="instruct-view">
				<block v-for="(item,index) in banner" :key="index">
					<view :class="[{'instruct-active': index == currentIndex},'instruct']"></view>
				</block>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {defineProps,ref, watch} from 'vue'
	//由defineProps定义出的props对象，可以理解成就是一个reactive，两者都是proxy对象
	//只不过由defineProps定义出的props对象的值是只读的，还有在模板上可以单独属性直接使用
  	const props = defineProps(["banner"])
	
	// 1、轮播图滑动时触发
	const currentIndex = ref(0) // 默认为第一张图片的下标
	function swiperChange(e){
		currentIndex.value = e.detail.current // 将当前图片下标赋值
	}
	
	// 2、点击轮播图跳转详情页
	function goDetail(id, video_url) {
		// console.log("sss",video_url);
		// 商品有视频 跳转到短视频页面，没有就跳转到详情页
		if (video_url == '') {
			// console.log('跳转详情页')
			uni.navigateTo({
				url: `/pages/goods-detail/goods-detail?goods_id=${id}`
			})
		} else {
			uni.navigateTo({
				url: `/pages/short-video/short-video?goods_id=${id}`
			})
		}
	}
	
	
</script>

<style scoped>
/* 轮播区域 */
.swiper-view {
	height: 320rpx;
	/* background: linear-gradient(to bottom, #4CD964 25%, #c0f2c8 100%); */
	background: linear-gradient(to bottom, #e94b37 25%, #e59f95 100%);
	padding: 20rpx 20rpx 0 20rpx;
}

.swiper-top {
	height: 300rpx;
	position: relative;
}

.swiper {
	height: 300rpx !important;
	border-radius: 20rpx;
	overflow: hidden;
	transform: translateY(0);
}

.swiper-item image {
	width: 100%;
	height: 300rpx !important;
	object-fit: cover;
}

/* 指示点 */
.instruct-view {
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 10rpx;
	left: 0;
	width: 100%;
}

.instruct {
	background: #4e90a6;
	height: 10rpx;
	width: 30rpx;
	border-radius: 50rpx;
	margin: 0 10rpx;
}

.instruct-active {
	background: #FFFFFF !important;
}
</style>